<template>
  <div class="app-container initializeRoll">
    <div class="batchRemit initializeRoll">
      <div class="topDiv">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="批量打款" name="first">
            <el-row>
              <el-col :span="23">
                <el-steps
                  :active="Switch"
                  finish-status="success"
                  simple
                  style="margin-top: 20px"
                >
                  <el-step title="上传数据"></el-step>
                  <el-step title="锁定批次"></el-step>
                  <el-step title="开始打款"></el-step>
                </el-steps>
              </el-col>
            </el-row>
            <!-- 上传数据 -->
            <div v-show="Switch == 1">
              <el-row class="divColor">
                <el-col :span="24">
                  <div class="divFlex">
                    <span> 批量打款模板使用说明： </span>
                    <!-- <el-button type="text" class="el-icon-arrow-up">
                      收起
                    </el-button> -->
                  </div>
                </el-col>
                <el-col :span="24">
                  <ul>
                    <li>
                      1.批量打款模板使用说明批量打款模板使用说明批量打款模板使用说明批量打款模板使用说明
                    </li>
                    <li>
                      2.批量打款模板使用说明批量打款模板使用说明批量打款模板使用说明批量打款模板使用说明
                    </li>
                    <li>
                      3.批量打款模板使用说明批量打款模板使用说明批量打款模板使用说明批量打款模板使用说明
                    </li>
                  </ul>
                </el-col>
              </el-row>
              <el-row style="padding: 30px 15px; margin-top: 10px">
                <el-col :span="24">
                  <span> 选择打款带征主题通道 </span>
                </el-col>

                <!-- 第一个选择框 ==银行卡一 银行卡二  支付宝1 支付宝二 -->
                <!-- 第二个选择框 ==银行卡和支付宝 -->

                <!-- 如果选择银行卡的话, 第二个选项卡可以选择银行卡和支付宝 -->
                <!-- 如果选择支付宝的话, 第二个选项卡只能支付宝 -->

                <el-col :span="24" style="margin-top: 15px">
                  <!-- <el-select
                    v-model="moneyTypeData"
                    filterable
                    placeholder="请选择"
                    @change="aisle"
                    style="width: 200px"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select> -->
                  <el-select
                    v-model="moneyNo"
                    filterable
                    placeholder="请选择"
                    style="margin-left: 5px; width: 200px"
                  >
                    <el-option
                      v-for="item in options1"
                      :key="item.id"
                      :label="item.accountName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-model="MakeMoney"
                    filterable
                    placeholder="请选择"
                    style="margin-left: 5px; width: 200px"
                    disabled
                  >
                    <el-option
                      v-for="item in options3"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-button
                    type="primary"
                    class="el-icon-download"
                    style="margin-left: 5px"
                    >
                    <a href="http://ceshi.91weiduan.cn/批量付款文件上传模板.xls">批量打款模板</a>
                    </el-button
                  >
                </el-col>
                <el-col :span="24" style="margin-top: 30px">
                  <span> 选择已填好的打款文件 </span>
                </el-col>
                <el-col :span="24" style="margin-top: 10px">
                  <el-upload
                    ref="field106"
                    class="upload-demo"
                    :action="actionUrl()"
                    :file-list="fileList"
                    :on-change="handleChange"
                    :auto-upload="false"
                    accept=".xls,.xlsx"
                    :before-upload="field107BeforeUpload"
                  >
                    <el-button type="primary" icon="el-icon-upload"
                      >点击上传</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      仅允许导入xls、xlsx格式文件。
                    </div>
                  </el-upload>
                  <el-button
                    style="margin-top: 20px; width: 120px; margin-bottom: 50px"
                    type="primary"
                    @click="FirstSubmit"
                    >提交</el-button
                  >
                </el-col>
              </el-row>
            </div>

            <!-- 锁定批次 -->
            <div v-show="Switch == 2">
              <div class="containers center">
                <el-row style="margin-bottom: 0">
                  <el-col
                    :span="6"
                    style="
                      border-right: 0.1px solid #eeeeee;
                      text-align: center;
                      transform: translateY(15px);
                    "
                  >
                    <div
                      style="
                        color: #F9800BF;
                        margin-bottom: 5px;
                        color: #f9800b;
                      "
                    >
                      <span style="color: #3875f6; font-size: 30px">{{
                        suodingparam.payCount || 0
                      }}</span>
                    </div>
                    <div>总数</div>
                  </el-col>
                  <el-col
                    :span="6"
                    style="
                      border-right: 0.1px solid #eeeeee;
                      text-align: center;
                      transform: translateY(15px);
                    "
                  >
                    <div
                      style="color: #3875F; margin-bottom: 5px; color: #3875f6"
                    >
                      ￥<span style="color: #3875f6; font-size: 30px">{{
                        suodingparam.reqMoney || 0
                      }}</span>
                    </div>
                    <div>总金额(元)</div>
                  </el-col>

                  <el-col
                    :span="6"
                    style="
                      border-right: 0.1px solid #eeeeee;
                      text-align: center;
                      transform: translateY(15px);
                    "
                  >
                    <div
                      style="color: #3875F; margin-bottom: 10px; color: #3875f6"
                    ></div>
                    <div>
                      <el-button
                        type="primary"
                        size="small"
                        style="margin-left: 5px"
                        @click="Switch = 1"
                        >返回上一步</el-button
                      >
                      <el-button
                        type="primary"
                        size="small"
                        style="margin-left: 5px"
                        @click="secondSubmit"
                        >确 定</el-button
                      >
                    </div>
                  </el-col>
                </el-row>
              </div>

              <el-table :data="roleList" height="500" :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column
                  label="提现时间"
                  prop="createTime"
                  align="center"
                  width="150"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.createTime || "暂无" }}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  label="提现渠道"
                  prop="signAccountType"
                  align="center"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <span
                      v-show="scope.row.signAccountType == 'ALIPAYACCOUNTBOOK'"
                      >记账本</span
                    >
                    <span v-show="scope.row.signAccountType == 'WUKONG'"
                      >银行卡</span
                    >
                    <span v-show="scope.row.signAccountType == 'ALIPAY'"
                      >支付宝</span
                    >
                  </template>
                </el-table-column>

                <el-table-column
                  label="渠道名称"
                  prop="signAccountName"
                  align="center"
                  :show-overflow-tooltip="true"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.signAccountName || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="提现金额/元"
                  prop="amount"
                  align="center"
                />
                <el-table-column
                  label="收款户名"
                  prop="withdrawalAccountName"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.withdrawalAccountName || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="收款账户"
                  prop="withdrawalAccountNumber"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.withdrawalAccountNumber || "暂无"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="身份证号"
                  prop="withdrawalIdCard"
                  align="center"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.withdrawalIdCard || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="预留手机号"
                  prop="withdrawalPhoneNumber"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.withdrawalPhoneNumber || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="提现状态" align="center" prop="status">
                  <template slot-scope="scope">
                    <span v-show="scope.row.status == 'INIT'">初始化</span>
                    <span v-show="scope.row.status == 'FAIL'">失败</span>
                    <span v-show="scope.row.status == 'WATTING'">转帐中</span>
                    <span v-show="scope.row.status == 'SUCCESS'">成功</span>
                    <!-- <span v-show>{{ scope.row.status }}</span> -->
                  </template>
                  <!-- "INIT"  -->
                </el-table-column>
                <el-table-column label="转账信息" prop="message" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.message || "暂无" }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="notes"
                  label="备注"
                  align="center"
                  width="200"
                ></el-table-column>
                <!-- <el-table-column
                  label="手续费"
                  prop="serviceAmount"
                  align="center"
                /> -->
                <!-- <el-table-column
                  label="实际到账金额"
                  prop="realityAmount"
                  align="center"
                /> -->
              </el-table>
              <pagination
                style="margin: 0px 0px 100px 0px"
                :total="suoding.total"
                :page.sync="suoding.pageNum"
                :limit.sync="suoding.pageSize"
                @pagination="SecondStep"
              />
            </div>

            <!-- 开始打款 -->
            <div v-show="Switch == 3">
              <div class="dkwcBox">
                <img src="../../../assets/images/20210907162833.png" alt="" />
                <el-button type="primary" icon="el-icon-check" @click="success"
                  >完成</el-button
                >
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="批量打款记录" name="second">
            <!-- 查询表单 -->
            <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
              <el-form :inline="true" label-position="right" label-width="90px">
                <el-form-item label="订单时间">
                  <el-date-picker
                    v-model="form.form1"
                    type="datetimerange"
                    align="right"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 200px; margin-right: 30px"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd HH:mm:ss"
              
                  >
                  </el-date-picker>
                  <!-- <el-date-picker
                    v-model="form.form1"
                    style="width: 200px; margin-right: 30px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    clearable
                    :picker-options="pickerOptions0"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker> -->
                </el-form-item>

                <el-form-item label="批次号">
                  <el-input
                    v-model="form.form3"
                    placeholder="请输入批次号"
                    :maxlength="25"
                    clearable
                    style="margin-right: 30px; width: 200px"
                  ></el-input>
                </el-form-item>

                <el-form-item label="打款渠道">
                  <el-select
                    v-model="form.form4"
                    placeholder="请选择打款渠道"
                    clearable
                    filterable
                    style="margin-right: 30px; width: 200px"
                  >
                    <el-option
                      v-for="(item, index) in field107Options"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="名称">
                  <el-input
                    v-model="form.form5"
                    placeholder="请输入名称"
                    :maxlength="10"
                    clearable
                    style="margin-right: 30px; width: 200px"
                  ></el-input>
                </el-form-item>

                <el-form-item label="" style="margin-left: 110px">
                  <el-button
                    icon="el-icon-refresh"
                    style="
                      background: #eeeeee;
                      color: #6396f4;
                      font-weight: bold;
                    "
                    @click="resetQuery"
                    >重置
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="getDatalist(1)"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-form>

              <div class="xhxBox"></div>
            </div>
            <!-- 数据展示 -->
            <div class="cardBox">
              <div class="cardMiniBox">
                
                <div class="moneyBox">
                  <div style="color: red" class="fontW">
                    <span class="fh">￥</span> <span class="nuner">{{cardPamra.count||0}}</span>
                  </div>
                  <div class="sizeTest">打款次数</div>
                </div>
              </div>
              <div class="cardMiniBox">
                <div class="moneyBox">
                  <div class="fontW">
                    <span class="fh">￥</span> <span class="nuner">{{cardPamra.number||0}}</span>
                  </div>
                  <div class="sizeTest">打款笔数</div>
                </div>
              </div>
              <div class="cardMiniBox">
                <div class="moneyBox">
                  <div class="fontW">
                    <span class="fh">￥</span> <span class="nuner">{{cardPamra.totalAmount||0}}</span>
                  </div>
                  <div class="sizeTest">总打款金额</div>
                </div>
              </div>
              <div class="cardMiniBox">
                <div class="moneyBox">
                  <div class="fontW" style="color:rgb(58, 119, 246)">
                    <span class="fh">￥</span> <span class="nuner">{{cardPamra.totalRealityAmount||0}}</span>
                  </div>
                  <div class="sizeTest">总到账金额</div>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <!--  -->
            <div class="exportButton">
            
              <el-button
                style="background: #f5f5f5"
                icon="el-icon-upload2"
                @click="ProfitExport"
              >
                导出
              </el-button>
            </div>
            <!-- <el-row style="margin-top: 5px">
              <el-col :span="23" align="right">
                <el-button type="primary" size="mini">下载数据</el-button>
              </el-col>
            </el-row> -->

            <el-table :data="tableData" :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }">
              <el-table-column
                prop="createTime"
                label="时间"
                align="center"
                width="200"
              ></el-table-column>
              <el-table-column prop="batchNo" label="批次号" align="center">
              </el-table-column>
              <el-table-column
                prop="paymentNumber"
                label="打款记录(条)"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="signAccountType"
                label="打款渠道"
                align="center"
              >
                <template slot-scope="scope">
                  <span
                    v-show="scope.row.signAccountType == 'ALIPAYACCOUNTBOOK'"
                    >记账本</span
                  >
                  <span v-show="scope.row.signAccountType == 'WUKONG '"
                    >银联</span
                  >
                  <span v-show="scope.row.signAccountType == 'ALIPAY'"
                    >支付宝</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="signAccountName"
                label="名称"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="amount"
                label="打款请求金额"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="realityAmount"
                label="到账金额"
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.realityAmount || "0" }}
                </template>
              </el-table-column>

              <el-table-column prop="address" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="details(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <pagination
              style="margin: 0px 0px 30px 0px"
              :total="total"
              :page.sync="form.pageNum"
              :limit.sync="form.pageSize"
              @pagination="getDatalist"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBatchByUserId,
  bankWkxxConfigList,
  CapWithdrawalRecordStaAPI,
  importExcel,
  cpaRemitStatictiscList,
  findCapRemitPayList,
  doTransfer,
  exportXls,
  selectBatchPaymentRecordPaging,
  selectTenantExpenditureAccounts,selectBatchPaymentSummary
} from "@/api/finance/index.js";
export default {
  data() {
    return {
      //卡片汇总
      cardPamra:{},
      //时间选择器的快捷选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
        ],
      },

      //保存第二步的ID
      batchPaymentId: "",
      field107Options: [
         {
          value:undefined,
          label: "全部",
        },
        {
          value: "ALIPAYACCOUNTBOOK",
          label: "记账本",
        },
        {
          value: "WUKONG",
          label: "银联",
        },
        {
          value: "ALIPAY",
          label: "支付宝",
        },
      ],
      //锁定批次的分页
      suoding: {
        pageNum: 1,
        total: 0,
        pageSize: 10,
      },
      field106fileList: [], //用来显示选择以后文件的列表

      //第一步上传的文件
      fileList: [
        // {
        //   name: "food.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // }
      ],
      //打款类型参数 第一个下拉框
      moneyTypeData: "",
      // 第二个下拉框
      moneyNo: "",
      // 第三个下拉框
      MakeMoney: "0",
      //锁定批次的列表参数
      roleList: [
        {
          nickName: "1",
          userName: "1",
        },
      ],
      //批次号
      batch: [],
      //切换步骤条
      Switch: 1,
      //分页
      total: 0,
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      value: "",
      options: [
        { label: "支付宝", value: "ALIPAY" },
        { label: "银联", value: "WUKONG" },
        { label: "支付宝记账本", value: "ALIPAYACCOUNTBOOK" },
      ],
      options3: [
        { label: "打款到支付宝", value: "0" },
        { label: "打款到银联", value: "1" },
      ],
      //第二个下拉框
      options1: [{ label: "银行卡", value: "1" }],
      showTan2: false,
      //批量打款记录列表
      tableData: [
        // {time:'2'},
      ],
      form: {
        form1: [],
        form2: undefined,
        form3: undefined,
        form4: undefined,
        form5: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      //锁定批次卡片参数
      suodingparam: {
        payCount: "",
        reqMoney: "",
        signAccountName: "",
        signAccountType: "",
      },
      //批量打款和记录的切换
      activeName: "first", //second,first
      //用户ID
      userId: 0,
      //上传文件成功后返回的批次号
      PaymentFile: "",
      batchNo: "",
    };
  },
  created() {
    //获取用户ID
    this.form.form1[0] =
      this.moment().format("YYYY") +
      "-" +
      this.moment().format("MM") +
      "-" +
      "01" +
      " " +
      "00:00:00";
    this.form.form1[1] = this.moment().format("YYYY-MM-DD") + " " + "23:59:59";
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    this.getDatalist();
  },
  methods: {
    async getDatalist(row) {
      console.log(this.form, "搜索的参数");
      if (!this.form.form1) {
        this.form.form1 = [];
      }
      let param = {
        batchNo: this.form.form3, //批次号
        startTime: this.form.form1[0],
        endTime: this.form.form1[1], //结束时间
        pageNum: this.form.pageNum,
        pageSize: this.form.pageSize,
        signAccountName: this.form.form5, //名称
        signAccountType: this.form.form4, //打款渠道  ALIPAY支付宝   ALIPAYACCOUNTBOOK记账本 WUKONG 银联
      };

      // "startTime": null,
      // "endTime": null,
      // "id": 18,
      // "batchNo": "e519cd90-5564-4559-9288-e75ae35f343f",
      // "paymentNumber": 1,
      // "signAccountId": 3,
      // "signAccountType": "ALIPAY",
      // "signAccountName": "支付宝",
      // "amount": 0,
      // "realityAmount": 0,
      // "createTime": 1640420424000
      //获取批次号
      const data = await getBatchByUserId(param);
      console.log(data, "获取批次号");
      if (data.code == 200) {
        this.total = data.data.total;
        this.tableData = data.data.list;
        // this.batch = data.data;
      } else {
        this.$message.error(data.msg);
      };
       
       const cardData=await selectBatchPaymentSummary(param);
       console.log(cardData,'卡片');
       if(cardData.code==200){
         this.cardPamra=cardData.data;
       }else{
 this.$message.error(cardData.msg);
       };
       if(row){
          this.$message({
          message: '搜索中...',
          type: 'success'
        });
       };




      // 获取下拉框支付宝银行卡记账本所有数据
       let param2 = {
        tenantId: this.userId,
        // signAccountType: this.moneyTypeData, //这个根据类型搜索
      };
      const data2 = await selectTenantExpenditureAccounts(param2);
      if (data2.code == 200) {
        this.options1 = data2.data;
      } else {
        this.$message.error(data2.msg);
      }
      console.log(this.options1, "11111");
      this.moneyNo = "";
    },
    //第二步的提交按钮
    async secondSubmit() {
      const data = await doTransfer(this.batchPaymentId);
      if (data.code == 200) {
        this.$message({
          message: data.msg,
          type: "success",
        });
        this.Switch = 3;
      } else {
        this.$message.error(data.msg);
      }
      console.log(data, "打款结果");
    },
    //第一步的提交按钮
    async FirstSubmit() {
      console.log(this.field106fileList, "666");
      if (
        this.moneyNo == "" ||
        this.MakeMoney == ""
      ) {
        this.$message({
          message: "请选择打款通道",
          type: "warning",
        });
      } else if (this.PaymentFile == "") {
        this.$message({
          message: "请导入打款文件",
          type: "warning",
        });
      } else {
        //获取锁定批次列表

        const data = await findCapRemitPayList(this.PaymentFile);
        if (data.code == 200) {
          this.Switch = 2;
          //获取第二步卡片的总数和总金额
          const batchNoList = await cpaRemitStatictiscList({
            batchNo: data.msg,
          });
          if (batchNoList.code == 200) {
            console.log(batchNoList, "批次号获取总数和总金额卡片");
            this.suodingparam.payCount = batchNoList.data.paymentNumber; //总数
            this.suodingparam.reqMoney = batchNoList.data.amount; //总金额
            this.suodingparam.signAccountType =
              batchNoList.data.signAccountType; //提现渠道
            this.suodingparam.signAccountName =
              batchNoList.data.signAccountName; //渠道名称
            this.batchPaymentId = batchNoList.data.id;
            this.batchNo = batchNoList.data.batchNo;

            this.SecondStep();
          } else {
            this.$message.error(data.msg);
          }
        } else {
          this.$message.error(data.msg);
        }
      }
    },
    // 获取第二步的列表
    async SecondStep() {
      let param = {
        pageNum: this.suoding.pageNum, //分页
        pageSize: this.suoding.pageSize, //分页
        batchNo: this.batchNo,
      };
      const dataList = await selectBatchPaymentRecordPaging(param);
      if (dataList.code == 200) {
        this.suoding.total = dataList.data.total;
        //卡片里面包含的是提现渠道和渠道名称,所以把数组里面都遍历添加进去。
        dataList.data.list.forEach((item) => {
          item.signAccountName = this.suodingparam.signAccountName;
          item.signAccountType = this.suodingparam.signAccountType;
        });
        this.roleList = dataList.data.list;
      } else {
        this.$message.error(data.msg);
      }
      console.log(dataList, "列表22222");
    },
    //第一步上传的文件函数
    handleChange(file, fileList) {
      if (
        this.moneyNo == "" ||
        this.MakeMoney == ""
      ) {
        this.$message({
          message: "请选择打款通道",
          type: "warning",
        });
        this.field106fileList = [];
      } else {
        if (this.fileList.length >= 1) {
          this.fileList = [];
        }
        console.log(this.fileList, "文件列表");
        console.log(this.field106fileList, "文件列表22");
        this.fileList.push(file);
        let formData = new FormData();

        formData.append("file", file.raw); //上传的文件
        formData.append("tenantSignAccountId", this.moneyNo); //打款的账号
        console.log(formData, "777");
        this.PaymentFile = formData;
      }
    },
    //上传数据选择第一个下拉框的事件函数
    async aisle() {
      let param = {
        tenantId: this.userId,
        // signAccountType: this.moneyTypeData, //这个根据类型搜索
      };
      const data = await selectTenantExpenditureAccounts(param);
      if (data.code == 200) {
        this.options1 = data.data;
      } else {
        this.$message.error(data.msg);
      }
      console.log(this.options1, "11111");
      this.moneyNo = "";
    },

    // 11111111111111111
    readFileDownload(data, msg) {
      var res = data;
      if (
        res.type === "application/json" ||
        res.type === "application/json;charset=UTF-8"
      ) {
        // 失败的时候，注意ie兼容问题
        let fileReader = new FileReader();
        fileReader.onload = function (event) {
          let jsonData = JSON.parse(this.result); // this.result是根据event，读取文件后打印的
          console.log(jsonData, "...............");
          if (jsonData.data === null && jsonData.code === 1) {
            Message({
              message: jsonData.msg || "Error",
              type: "error",
              duration: 5 * 1000,
            });
          }
        };
        fileReader.readAsText(res);
      }
      if (
        res.type === "application/octet-stream" ||
        res.type === "application/vnd.ms-excel" ||
        res.type === "application/vnd.ms-excel;charset=UTF-8"
      ) {
        console.log("success..."); // 成功，注意ie兼容问题

        const blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });

        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, msg);
        } else {
          console.log(blob);
          const url = window.URL.createObjectURL(blob);
          console.log(url);
          const aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", msg);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink);
          window.URL.revokeObjectURL(url);
        }
      }
    },
    //重置
    resetQuery() {
      this.form = {
        form1: [],
        form2: undefined,
        form3: undefined,
        form4: undefined,
        form5: undefined,
        pageNum: 1,
        pageSize: 10,
      };
      this.form.form1[0] =
        this.moment().format("YYYY") +
        "-" +
        this.moment().format("MM") +
        "-" +
        "01" +
        " " +
        "00:00:00";
      this.form.form1[1] =
        this.moment().format("YYYY-MM-DD") + " " + "23:59:59";
      this.getDatalist(1);
    },

    // 11111111111111111111
    async ProfitExport() {
      const res = await exportXls();
      console.log(res, "文件流");
      if (!res) return; //
      const excelTitle = "批量打款记录.xlsx";

      this.readFileDownload(res, excelTitle);
    },

    actionUrl() {
      return "";
    },

    //
    field107BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    // 第三步点击完成按钮
    success() {
      this.activeName = "second"; //second,first 跳转到打款记录列表
      this.Switch = 1; //步骤条恢复
    },

    //第三步的提交按钮
    thirdSubmit() {
      console.log("完成");
      // this.Switch='3';
    },
    //点击查看详情
    details(row) {
      console.log(row, "查看详情");
      this.$router.push({
        path: "/finance/details",
        query: {
          batchNo: row.batchNo,
        },
      });
    },
    loading() {},
    //搜索按钮
    searchButton() {
      console.log(this.form, "搜索按钮");
    },

    handleClick(tab, event) {
      console.log(tab, event);
      this.getDatalist();
    },
  },
};
</script>

<style scoped lang="scss">
/* 卡片 */
.cardBox {
  display: flex;
  justify-content: space-between;
  width: 99.9%;
  border: 1px #eee solid;
  border-radius: 5px;
  height: 150px;
  align-items: center;
  background: #fff;
  padding: 10px 0px;
  overflow: hidden;
  box-shadow: 0 0.5px 10px rgba(0, 0, 0, 0.07);
  .cardMiniBox {
    display: flex;
    // flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    // border: 1px red solid;
    border-right: 1px #eee solid;
    width: 25%;
    height: 100%;
    .moneyBox {
      display: flex;
      flex-wrap: wrap;
      width: 85px;
      justify-content: center;
      // border: 1px red solid;
      .fontW {
        font-weight: 600;
        .fh {
          font-size: 10px;
        }
        .nuner {
          font-size: 25px;
        }
      }
      .sizeTest{
        font-size: 14px;
        color:rgb(93, 93, 93);
      }
    }
  }
}
.xhxBox {
  height: 5px;
  margin-top: 10px;
  border-top: 1px #eee solid;
}
</style>
<style lang='scss'>
.exportButton {
  margin-bottom: 10px;
  //  border: 1px red solid;
  display: flex;
justify-content:flex-end;
}
.dkwcBox {
  // border: 1px red solid;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    height: 350px;
  }
}
.topDiv {
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  padding: 20px;
  height: auto;
  .title {
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
  .containers {
    height: 130px;
    // border: 1px red solid;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
  }
}
.batchRemit {
  .divColor {
    margin-top: 20px;
    background-color: #fffbe6;
    border-radius: 5px;
    margin-right: 15px;
    padding: 20px 20px;

    .divFlex {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        color: #666;
      }
    }
    ul {
      li {
        font-size: 14px;
        line-height: 30px;
        color: #333;
      }
    }
  }
  .el-tabs__header {
    margin-right: 15px;
  }
  .topDiv {
    .title {
      margin-right: 15px;
    }
  }
}
</style>

